<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/lunbo/ShopShow.css">
    <title>37购网</title>
</head>

<body>
    <div class="container">
        <div class="nav_wrap clearfix">
            <div class="nav_box">
                <div class="left_part">
                    欢迎来到37e购 <span class="position">定位：<span id="J_mylocal"></span></span>
                </div>
                <div class="right_part">
                    <ul id="J_nav" class="clearfix">
                        <li><a class="nav_txt active" href="javascript:;">首页</a></li>
                        <li><a class="nav_txt" href="javascript:;">登录</a></li>
                        <li><a class="nav_txt" href="javascript:;">注册</a></li>
                        <li><a class="nav_txt" href="javascript:;">门店</a></li>
                        <li><a class="nav_txt" href="javascript:;">我的订单</a></li>
                        <li><a class="nav_txt" href="javascript:;">我的</a></li>
                        <li><a class="nav_txt" href="javascript:;">消息<span class="num">1</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="banner_wrap">
            <div class="banner_box">
                <div class="contents_box clearfix">
                    <div class="left_logo_box"><span class="logo_bg"></span></div>
                    <div class="right_search_box">
                        <div class="shop_txt"><a href="javascript:;">商品 </a><a href="javascript:;">门店</a></div>
                        <div class="search_input clearfix">
                            <input type="text"><i class="icon_search"></i>
                            <a class="btn_search" href="javascript:;">搜 索</a>
                            <a class="btn_shop" href="javascript:;"><i class="icon_shopping"></i>购物车</a>
                        </div>
                        <ul class="list_box clearfix">
                            <li>历史记录：</li>
                            <li>iphone7</li>
                            <li>男士皮包</li>
                            <li>芭比波良粉底液</li>
                        </ul>
                    </div>
                </div>
                <div class="title_box">
                    <ul class="clearfix">
                        <li><a href="javascript:;">首页</a></li>
                        <li><a href="javascript:;"><i class="shop_icon"></i></a></li>
                        <li><a href="javascript:;">手机通迅</a></li>
                        <li><a href="javascript:;"><i class="shop_icon"></i></a></li>
                        <li><a class="act_color" href="javascript:;">Apple iphone7 </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="contents_wrap clearfix">
            <div class="left_content">
                <div id="tsShopContainer">
                    <div id="tsImgS">
                        <a href="../img/033.jpg" title="Images" class="MagicZoom" id="MagicZoom"><img width="430" height="340" src="../img/033.jpg">
                        </a>
                    </div>
                    <div id="tsPicContainer">
                        <div id="tsImgSArrL" onclick="tsScrollArrLeft()" showpicnum="2"></div>
                        <div id="tsImgSCon" style="width: 430px;">
                            <ul style="width: 430px; margin-left: 0px;">
                                <li onclick="showPic(0)" rel="MagicZoom" class="tsSelectImg" style="outline: 0px;"><img height="42" width="42" src="../img/01.jpg" tsimgs="../img/01.jpg">
                                </li>
                                <li onclick="showPic(1)" rel="MagicZoom" class="" style="outline: 0px;"><img height="42" width="42" src="../img/022.jpg" tsimgs="../img/022.jpg"></li>
                                <li onclick="showPic(2)" rel="MagicZoom" style="outline: 0px;"><img height="340" width="430" src="../img/033.jpg" tsimgs="../img/033.jpg"></li>
                                <li onclick="showPic(3)" rel="MagicZoom" class="" style="outline: 0px;"><img height="42" width="42" src="../img/044.jpg" tsimgs="../img/044.jpg"></li>
                                <li onclick="showPic(3)" rel="MagicZoom" class="" style="outline: 0px;"><img height="42" width="42" src="../img/055.jpg" tsimgs="../img/055.jpg"></li>
                            </ul>
                        </div>
                        <div id="tsImgSArrR" onclick="tsScrollArrRight()" showpicnum="2"></div>
                    </div>
                    <img class="MagicZoomLoading" width="16" height="16" src="../img/loading.gif" alt="Loading...">
                </div>
            </div>
            <div class="right_content">
                <ul>
                    <li>
                        <h3>Apple iphone 7</h3>
                        <span class="detail_txt">16G 金色 4G手机 （全网通版）采用64位架构的A9芯片，iOS10操作系</span>
                    </li>
                    <li>
                        <span class="prices">999.00 <i class="cost_price">原价9999.00</i></span>
                        <span class="activity">本店活动 <i class="down_price">满100减200</i></span>
                        <span class="month_sell">月销量：<i class="costs">原价9999</i></span>
                    </li>
                    <li>
                        <div id="J_colors" class="cols">
                            <em>颜色</em>
                            <span class="active_color">蓝色<i class="icon_right"></i></span>
                            <span>红色<i></i></span>
                            <span>白色<i></i></span>
                        </div>
                        <div id="J_size" class="size">
                            <em>尺寸</em>
                            <span class="active_color">XL<i class="icon_right"></i></span><span>XXL<i></i></span><span>XXXL<i></i></span>
                        </div>
                        <div class="counts">
                            <em>数量</em>
                            <span class="number_box"><input id="J_numbers" type="text" name="" value="1"><span class="plus_mark">+</span><span class="minus_mark">-</span></span><i class="piece">件</i>库存<i class="j_num">9999</i>件</div>
                        <div class="shop_button_box">
                            <a class="shop_button active_btn" href="javascript:;">立即购买</a>
                            <a class="join_button" href="javascript:;">加入购物车</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="goods_container">
            <div class="collect_goods_box"><span class="collect_shop"><i class="icon_xin"></i>收藏商品</span><span class="report">举报</span>
                <h5 class="goods_title">商品详情</h5>
            </div>
            <div class="names_wrap">
                <div class="content_box clearfix">
                    <div class="left_content_box">
                        <span>品牌名称：<em class="blu_txt">景德镇第一家</em> </span>
                        <span>是否商场同款:是</span>
                        <span>材质:塑料</span>
                    </div>
                    <div class="mid_content_box">
                        <span>是否商场同款:是</span>
                        <span>颜色分类:蓝色</span>
                        <span>颜色分类:蓝色</span>
                    </div>
                    <div class="right_content_box">
                        <span>产品详情</span>
                        <span>产品详情</span>
                        <span>产品详情</span>
                    </div>
                </div>
            </div>
            <div class="img_wrap">
                <img src="../img/pics.jpg" alt="">
                <img src="../img/pics.jpg" alt="">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&qq-pf-to=pcqq.c2c"></script>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="../js/lunbo/MagicZoom.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/lunbo/ShopShow.js"></script>
    <script type="text/javascript">
    var main = {
        init: function() {
            this.bindEvent();
            this.myLocal();
        },
        bindEvent: function() {
            // 商品门店样式
            $(".shop_txt a").click(function() {
                $(this).addClass("active_txt").siblings().removeClass();
            }).eq(0).trigger('click');
            //颜色寸存
            $("#J_colors span,#J_size span").click(function() {
                $(this).addClass("active_color").siblings().removeClass("active_color");
                $(this).children("i").addClass("icon_right").parent().siblings().children("i").removeClass("icon_right");
            });
            //计算器
            $(".plus_mark").click(function() {
                var x = $("#J_numbers").val();
                x++;
                if (x > $(".j_num").text()) {
                    x = $(".j_num").text();
                }
                $("#J_numbers").val(x);
            });
            $(".minus_mark").click(function() {
                var y = $("#J_numbers").val();
                y--;
                if (y < 0) {
                    y = 0;
                };
                $("#J_numbers").val(y);
            });
        },
        myLocal: function() {
            document.getElementById("J_mylocal").innerHTML = remote_ip_info.city;
        }
    };

    $(function() {
        main.init();
    });
    </script>
</body>

</html>
